<template>
	<view class="szBody">
		<view>
			<navitop>
				<i class="iconfont" slot="left-slot" @click="outlot">&#xe667;</i>
				<span slot="center-slot">个人信息</span>
				<!-- <span slot="right-slot">123</span> -->
			</navitop>
		</view>
		<view class="userDetails" :style="'padding-top:' + nv_height + ';'">
			<div class="user_img">
				<div style="padding: 10px 0 10px 0">
					<image :src="userInfo.avatar"></image>
				</div>
				<div>
					<radio-group @change="radioChanges"  style="transform:scale(0.7);">
						 <radio  :checked="userInfo.sex == 1 ? true : false">
							 <text >男</text>
						 </radio>	
						 <radio style="margin-left: 50px;"  :checked="userInfo.sex == 2 ? true : false">
							 <text >女</text>
						 </radio>
					</radio-group>
				</div>
			</div>
			<div class="user_box">
				<div class="user_class_text">
					<text>登录账号：</text><input type="text" v-model="userInfo.userName" />
				</div>
			</div>
			<div class="user_box">
				<div class="user_class_text">
					<text>用户姓名：</text><input type="text" v-model="userInfo.realName"  />
				</div>
			</div>
			<div class="user_box">
				<div class="user_class_text">
					<text>手机号：</text><input type="text" v-model="userInfo.mobile"  />
				</div>
			</div>
			<div class="user_box">
				<div class="user_class_text">
					<text>电子邮箱：</text><input type="text" v-model="userInfo.email"  />
				</div>
			</div>
			<div class="user_box">
				<div class="user_class_text">
					<text>任职部门：</text><input type="text" v-model="userInfo.officeName"  />
				</div>
			</div>
			<div class="user_box">
				<div class="user_class_text">
					<text>任职公司：</text><text  style="width: 40%;">{{userInfo.companyName}}</text> <text>退出公司</text>
				</div>
			</div>
			<div class="user_box">
				<div class="user_class_text">
					<text>个性签名：</text><input type="text" v-model="userInfo.sign"  />
				</div>
			</div><br>
			<div class="user_buttom">
				<div class="user_class_buttom" @click="ok_user">
					<text>保&nbsp;&nbsp;存</text>
				</div>
			</div>
		</view>
		<popus ref="alert" >
			<div :style="alertWidth">
				<acitdetals :selid="selid" @closes="closes"></acitdetals>
			</div>
		</popus>
	</view>
</template>

<script>
import navitop from '@/components/common/navi-top'
import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
import {postSave,getUserInfo} from '@/common/api/table.js'
 export default {
	 components:{
		 navitop,
		 popus
	 },
 	data(){
		return{
			userInfo:{},
			selid: '1',
			demo:'',
			windowWidth: '',
			heigs: '',
			heigsdiv: 0,
			nv_height: '',
		}
	},
	
	onLoad() {
		this.demo = uni.getSystemInfoSync().statusBarHeight;
		
		let _this = this;
		uni.getSystemInfo({
		    success: function (res) {
				_this.alertWidth = 'width:' + res.windowWidth + 'px;'
		    },
			
		});
		
		uni.onKeyboardHeightChange(res => {
			res.height = res.height + 50;
			this.heigsdiv = 'height:' + res.height  + 'px;' ;
			this.heigs = 'height:' + res.height + 'px;' ;
		})
		this.nv_height = uni.getSystemInfoSync().statusBarHeight + 65 + 'px';
	},
	
	onShow() {
		
		getUserInfo().then(item => {
			if(item.code == 200){
				console.log(item)
				this.userInfo = item.data;
			}
		})
		
		if(this.userInfo){
			//没有头像使用默认头像
			if(userInfo.avatar==null){
				userInfo.avatar = '../../static/image/boy.png';
			};
			this.userInfo = userInfo;
		}
	},
	
	filters:{
		sexType(sex){
			if(sex==1){
				return`男`;
			}else if(sex==0){
				return`女`;
			}else{
				return `未知`;
			}
		}
	},
	methods:{
		go_details(){ 
			uni.navigateTo({
				url:'user-xg'
			})
		},
		
		closes(){
			
		},
		
		alert(){
			this.$refs.alert.open('left')
		},
		
		radioChanges(val){
			this.zhuke = val;
		},
		
		outlot(){
			uni.navigateBack();
		},
		runIndex(val){
			uni.navigateTo({
				url:'/pages/common/my/my-details?id='+ val +'&name='+ 123
			})

		},
		ok_user(){
			let user_data = {
				'id':  this.userInfo.userId,
				'email':  this.userInfo.email,
				'avatar':  this.userInfo.avatar,
				'mobile':  this.userInfo.mobile,
				'realName':  this.userInfo.realName,
				'sex':  this.userInfo.sex,
				'sign':  this.userInfo.sign,
			}
			uni.showLoading({
				title: '加载中...'
			})
			postSave(user_data).then((rows) => {
				if(rows.code == 200){
					uni.setStorageSync('userInfo',user_data);
					uni.hideLoading();
					uni.showToast({
						title: '修改成功！'
					})
				}
			})
		}
	}
 }	

</script>

<style scoped lang="scss">
	@import "@/static/css/user/index.scss";
	.user_box {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		.user_class {
			background-color: #fff;
			width: 95%;
			margin: auto;
			border: 1px solid red;
			text {
				padding: 0 0 0 30rpx;
			}
			image {
				height: 90rpx;
				width: 90rpx;
				line-height: 90rpx;
				border: 1px solid red;
			}
		}
		.user_class_text {
			background-color: #fff;
			width: 95%;
			margin: auto;
			display: flex;
			border-bottom: 1px solid #cacaca;
			text{
				padding: 0 0 0 30rpx;
				width: 30%;
				overflow: hidden;
			}
		}
	}
.user_img {
	text-align: center;
	background-color: #fff;
	width: 95%;
	margin: auto;
	image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
}
.user_buttom {
	width: 95%;
	text-align: center;
	margin: auto;
	height: 90rpx;
	line-height: 90rpx;
	border-top: 1px solid #cacaca;
	background-color: rgb(18, 150, 219);
	color: #fff;
}
	.userDetails {
		background-color: #fff;
	}
</style>
